/*新增费用*/
import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity,
	PixelRatio, TextInput, ScrollView, KeyboardAvoidingView, Platform
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { TitleView } from '../_components/TitleView.js';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import { Common } from '../../../../component/common/Common.js';
import ToastUtil from '../../../../utils/toast';
import OrderAPIService from '../_common/OrderAPIService';
import MethodUtil from '../../../../utils/MethodUtil';
const scale = GLOBAL.SCALE;
let orderId = '';
let sendData = { submitStep: 'ADD_ORDER_FEE' };
export class FeeAddPage extends Component {
	static navigationOptions = {
		header: null
	}
	constructor(props) {
		super(props);
		let { params } = props.navigation.state;
		orderId = params.orderId;
		this.state = {
			feeTypeList: [],
			status: 'data',   // 状态 
			totalFee: 0
		}
	}

	componentWillMount () {
		this.setState({
			status: 'loading'
		})
		this._getFeeTypeList().then(data => {
			this.setState({ feeTypeList: data }, () => {
				this._countAll();
			});
			this.setState({
				status: 'data'
			})
		})
	}

	//获取费用
	async _getFeeTypeList () {
		respData = await OrderAPIService.getFeeList({ orderId });
		return respData || [];
	}

	_countAll () {
		let totalFee = 0;
		this.state.feeTypeList.map(item => {
			if (item.feeAmt > 0) {
				totalFee = MethodUtil.countObj.add(totalFee, Number.parseFloat(item.feeAmt));
			}
		})
		this.setState({ totalFee: totalFee })
	}

	//保存
	async _save () {
		let { feeTypeList } = this.state;
		sendData.orderFeeList = [];
		sendData.orderInfo = {}
		sendData.orderInfo.orderId = orderId;
		feeTypeList.map(item => {
			if (item.feeAmt > 0) {
				item.orderId = orderId;
				sendData.orderFeeList.push(item);
			}
		})
		this.setState({
			status: 'loading'
		})
		let saveData = OrderAPIService.feeAdd(sendData)
		this.setState({
			status: 'data'
		})
		if (saveData) {
			ToastUtil.showSuccess('费用保存成功').then(() => {
				this.props.navigation.state.params.callBack()
				this._headCloes();
			})
		}
	}

	_headCloes = () => {
		this.props.navigation.goBack();
	}
	render () {
		let { feeTypeList, status, totalFee } = this.state;
		return (
			<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={20}>
				<ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps={'handled'} style={{
					paddingLeft: 15 * scale,
					paddingRight: 15 * scale
				}}>
					<Common type="headCloes" callBack={this._headCloes} />
					<TitleView title={'费用估算'} describe={'内贸费用项目'} />
					<View style={{ paddingTop: 15 * scale }}>
						<View style={styles.boxAll}>
							{
								feeTypeList && feeTypeList.map((item, index) => {
									return <View style={styles.boxItem} key={index}>
										<Text style={styles.boxItemName}>{item.feeTypeName}</Text>
										<Text style={styles.boxItemValue}>￥</Text>
										<TextInput
											keyboardType='numeric'
											ref="accountInput"
											style={styles.listInput}
											underlineColorAndroid='transparent'
											placeholderTextColor="#BFBFBF"
											maxLength={30}
											defaultValue={(item.feeAmt && item.feeAmt + "") || ''}
											onChangeText={(text) => {
												// const newText = text.replace(/[^\d\.]+/, '');
												item.feeAmt = text;
												this._countAll()
											}}
										/>
									</View>
								})
							}
						</View>
					</View>
					<Text style={{ height: 34 * scale, lineHeight: 34 * scale, color: '#C67300', fontSize: 12 * scale }}>总费用:￥{totalFee || 0}</Text>
				</ScrollView>
				<View style={{ width: '100%', height: 60 * scale, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
					<TouchableOpacity onPress={() => { this._save() }} style={[styles.btnSave, styles.mtp9]}>
						<Text style={styles.btnSaveText}>保存</Text>
					</TouchableOpacity>
				</View>
				{
					status != 'data' ? (<View style={styles.statusStyle}><PageStatusIndex status={status} /></View>) : null
				}
			</KeyboardAvoidingView>
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.white,
	},
	boxAll: {
		flexDirection: 'row',
		flexWrap: 'wrap',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	boxItem: {
		flexDirection: 'row',
		alignItems: 'center',
		width: 158 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		position: 'relative',
		paddingTop: 26 * scale,
	},
	boxItemName: {
		lineHeight: 16 * scale,
		color: style.color.darkGray,
		marginRight: 3 * scale,
		width: 158 * scale,
		position: "absolute",
		top: 10 * scale,
	},
	boxItemValue: {
		lineHeight: 40 * scale,
		color: style.color.dark,
		position: "absolute",
		left: 0,
		bottom: 0
	},
	listInput: {
		width: 120 * scale,
		height: 40 * scale,
		paddingLeft: 20 * scale
	},
	btnSaveText: {
		color: style.color.white,
		fontSize: 18 * scale,
		lineHeight: 44 * scale,
		textAlign: 'center',
	},
	btnSave: {
		width: 345 * scale,
		height: 44 * scale,
		backgroundColor: style.color.themeColor,
		borderRadius: 22 * scale,
		position: 'absolute',
		bottom: 0
	},
	mtp9: {
		marginTop: 9 * scale,
		marginBottom: 9 * scale
	},
	statusStyle: {
		flex: 1,
		position: 'absolute',
		height: '100%',
		width: '100%',
		top: 0,
		left: 0,
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center'
	},
})
